<template>
  <div class="my">
    <div class="my-header" v-show="!logged">
      <span @click="goLogin">登录 / 注册</span>
    </div>
    <div class="my-header my-header-logged" v-show="logged">
      <img :src="userInfo.imgUrl" alt="" />
      <div>{{ userInfo.name }}</div>
    </div>
    <div class="my-list my-center">
      <div class="my-list-title">个人中心</div>
      <ul>
        <li>
          <div>
            <img src="@/assets/images/pingtuan.png" alt="" />
            <span>我的拼团</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
        <li>
          <div>
            <img src="@/assets/images/shoucang-s.png" alt="" />
            <span>我的收藏</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
        <li>
          <div>
            <img src="@/assets/images/dizhi.png" alt="" />
            <span>地址管理</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
      </ul>
    </div>
    <div class="my-list my-weal">
      <div class="my-list-title">优惠福利</div>
      <ul>
        <li>
          <div>
            <img src="@/assets/images/youhuiquan.png" alt="" />
            <span>优惠券</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
      </ul>
    </div>
    <div class="my-list my-service">
      <div class="my-list-title">专属客服</div>
      <ul>
        <li>
          <div>
            <img src="@/assets/images/kefu-s.png" alt="" />
            <span>我的客服</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
        <li>
          <div>
            <img src="@/assets/images/yijian.png" alt="" />
            <span>意见箱</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
        <li>
          <div>
            <img src="@/assets/images/jiaru.png" alt="" />
            <span>加入茶师</span>
          </div>
          <img src="@/assets/images/right.png" alt="" />
        </li>
      </ul>
    </div>
    <div class="my-list log-out" v-show="logged">
      <div class="log-out-btn" @click="logout">退出登录</div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "My",
  data() {
    return {
      // logged: false,
      // userInfo: {},
    };
  },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    logout() {
      this.$store.commit("user/userLogOut");
      this.$router.replace("/my");
    },
  },
  computed: {
    ...mapState("user", { logged: "loginStatus", userInfo: "userInfo" }),
  },
  // mounted() {
  //   let user = localStorage.getItem("USER");
  //   if (user) {
  //     this.logged = true;
  //     this.userInfo = JSON.parse(user);
  //   } else {
  //     this.logged = false;
  //     this.userInfo = {};
  //   }
  // },
};
</script>

<style lang="scss" scoped>
.my {
  padding-bottom: 1.6rem;

  .my-header {
    height: 4.2667rem;
    background: url("@/assets/images/cbtopbg.jpg");
    position: relative;

    span {
      font-size: 0.4267rem;
      color: #fff;
      width: 3.2533rem;
      height: 0.8533rem;
      display: inline-block;
      padding: 0.1333rem 0.5333rem;
      border-radius: 0.1333rem;
      background-color: rgba(255, 181, 0, 0.9);
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -1.6267rem;
    }
  }
  .my-header-logged {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    img {
      width: 1.6rem;
      height: 1.6rem;
    }

    div {
      color: #fff;
      padding-top: 0.1333rem;
    }
  }

  .my-list {
    font-size: 0.4267rem;
    padding: 0 0.4rem;
    background-color: #fff;

    .my-list-title {
      color: #9e9e9e;
      height: 1.12rem;
      line-height: 1.12rem;
    }

    ul {
      li {
        border-top: 1px solid #e1e1e1;
        height: 1.12rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
          width: 0.5333rem;
        }
        span {
          display: inline-block;
          padding-left: 0.4rem;
        }
      }
    }
  }

  .my-center,
  .my-weal,
  .my-service {
    margin-bottom: 0.2667rem;
  }

  .log-out {
    padding: 0.1333rem 0;

    .log-out-btn {
      background-color: #b0352f;
      width: 100%;
      height: 1.1733rem;
      color: #fff;
      text-align: center;
      line-height: 1.1733rem;
      font-size: 0.4267rem;
      border-radius: 0.08rem;
    }
  }
}
</style>